<!-- 编辑作品一览 -->
<template>
  <div class="page-box  display-flex czbj">
    <p class="title-label mb10">
      作品一览类别设置
    </p>
    <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
      label-placement="left" class="mt20 sdfsdtrrter">
      <n-grid :cols="24" :x-gap="20" :y-gap="20">
        <n-form-item-gi span="24" label="地区:" path="sort">
          <n-select v-model:value='form.diqucode' filterable size="medium" :options="optionsc" clearable
            @change="qidjmxert" />
        </n-form-item-gi>
        <n-form-item-gi span="12" label="医院:" path="sort">
          <n-input type="text" v-model:value='form.hospital' placeholder="请输入医院名称" size="medium" clearable
            class="w100"></n-input>
        </n-form-item-gi>
        <n-form-item-gi span="12" label="医生:" path="sort">
          <n-input type="text" v-model:value='form.doctor' placeholder="请输入医生姓名" size="medium" clearable
            class="w100"></n-input>

        </n-form-item-gi>
        <n-form-item-gi span="24" label="产品:" path="sort">
          <div class=" ">
            <div class="flex-1 ">
              <n-select size="medium" multiple v-model:value='form.cpyjcode' :options="options" clearable
                @change="cpibsd" />
            </div>
            <div class="flex-1 mt20">
              <n-select size="medium" multiple v-model:value='form.cpejcode' :options="optionsb" clearable
                @change="zsdfcfdsfre" />
            </div>
          </div>

        </n-form-item-gi>
      </n-grid>
    </n-form>




  </div>

  <div class="page-box  display-flex czbj mt10">
    <p class="title-label mb10">
      作品详情设置
    </p>

    <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
      label-placement="left" class="mt20 sdfsdtrrter">
      <n-grid :cols="24" :x-gap="20" :y-gap="20">
        <n-form-item-gi span="24" label="标题:" path="sort">
          <n-input type="text" v-model:value='form.title' placeholder="请输入作品标题" size="medium" clearable
            class="w100"></n-input>
        </n-form-item-gi>

        <n-form-item-gi span="24" label="作品图片:" path="sort">
          <div class=" kjmklsertwe mt10">
            <div class="logo-context aa pr" v-for="(item, idx) in jjnseb" :key="idx">
              <img :src="item" class="w100 h100 imgcz" />
              <i class="iconfont dx-closefill red ckklksertr" @click="jjnseb.splice(idx, 1);"></i>
            </div>
            <div class="logo-context vertical-center aa">
              <upFile FileTitle="作品图片" @getFile="(data) => jjnseb.push(data)" more="2"></upFile>
            </div>
          </div>
        </n-form-item-gi>

        <n-form-item-gi span="24" label="手术体会:" path="sort">
          <n-input type="textarea" v-model:value='form.ssth' placeholder="请输入手术体会" rows="8" size="medium" clearable
            class="w100"></n-input>
        </n-form-item-gi>
      </n-grid>
    </n-form>

  </div>

  <div class="page-box  display-flex czbj mt10 dfxcsedtrytr">
    <p class="title-label mb10">
      专家简介
    </p>

    <n-form ref="formRef" :model="form"  label-width="120" :inline="false" size="normal"
      label-placement="left" class="mt20 sdfsdtrrter">
      <n-grid :cols="24" :x-gap="20" :y-gap="20">
        <n-form-item-gi span="24" label="人物图片:" path="sort">
          <div class=" kjmklsertwe mt10">
            <div class="logo-context aa pr" v-for="(item, idx) in jjnsec" :key="idx">
              <img :src="item" class="w100 h100 imgcz" />
              <i class="iconfont dx-closefill red ckklksertr" @click="jjnsec.splice(idx, 1);"></i>
            </div>
            <div class="logo-context vertical-center aa" >
              <upFile FileTitle="人物图片" @getFile="(data) => jjnsec.push(data)" more="2"></upFile>
            </div>
          </div>
        </n-form-item-gi>

        <n-form-item-gi span="24" label="简介:" path="sort">
          <n-input type="textarea" v-model:value='form.zjtext' placeholder="请输入专家简介" rows="8" size="medium" clearable
            class="w100"></n-input>
        </n-form-item-gi>
      </n-grid>
    </n-form>

  </div>
  <div class="jkjnjmxertw  vertical-center">
    <div>
      <n-button size="medium" @click="callBack">返回</n-button>
      <n-button :loading="crtetdfer" type="primary" size="medium" @click="saveFun" class="ml20">保存</n-button>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue"
import { dxget, callBack, dxpost, qurl } from "../../../util/index"
import upFile from "../../../components/util/upFile.vue";
const options = ref([])
const optionsb = ref([])
const crtetdfer = ref(false)
const optionsc = ref([])
const Userid = ref(localStorage.id)
const jjnseb = ref([])
const jjnsec = ref([])
const cpisda = ref()
const cz = qurl()
const iscz = ref(false)
const form = ref({
  title: "",//标题
  imgList: "",//图片介绍
  ssth: "",//手术体会
  zjimg: "",//专家图片
  zjtext: "",//专家介绍
  diqucode: "",
  diqutext: "",
  cpyjcode: "",//产品一级code
  cpyj: "",
  cpejcode: "",//产品二级code
  cpej: "",
  hospital: "",
  doctor: ""

})


const getxjdiqu = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd?name=xjdiqu", { roid: Userid.value })
  optionsc.value = data
}




const getcptype = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd?name=xjproductClassification", { roid: Userid.value })
  options.value = data
}


const cpibsd = async (item) => {
  cpisda.value = ""
  optionsb.value = []
  form.value.cpejcode = ''
  form.value.cpej = ''
  const { data } = await dxget("xjyx/xjyxproductManagement?sort=" + item + "&page=1&pageSize=99")
  const jkmxedf = []
  data.data.map(a => {
    jkmxedf.push({
      label: a.title,
      value: '' + a.id
    })
  })
  optionsb.value = jkmxedf

  try {
    form.value.cpyjcode = item
    let kkfsdf = []
    options.value.map(a => {
      item.map(b => {
        if (a.value == b) {
          kkfsdf.push(a.label)
        }
      })
    })
    form.value.cpyj = kkfsdf.join(",")
  } catch (e) {
    console.log(e);
  }

  console.log(form.value);

}
const qidjmxert = (data) => {
  form.value.diqucode = data
  form.value.diqutext = optionsc.value.filter(a => a.value == data)[0].label
  console.log(optionsc.value);
  console.log(form.value);
}
const zsdfcfdsfre = (data) => {
  form.value.cpejcode = data

  let kkfsdf = []
  optionsb.value.map(a => {
    data.map(b => {
      if (a.value == b) {
        kkfsdf.push(a.label)
      }
    })
  })
  // form.value.cpyj = kkfsdf.join(",")

  form.value.cpej = kkfsdf.join(",")
  console.log(form.value);
}
const id = cz.id

const initData = async () => {
  await getxjdiqu()
  await getcptype()

  const { data }: any = await dxget("xjyx/zpyl", { id })
  console.log(data);
  data.cpyjcode = data.cpyjcode.split(",")
  data.cpejcode = data.cpejcode.split(",")
  await cpibsd(data.cpyjcode)
  form.value = data
  jjnseb.value = form.value.imgList.split(",")
  jjnsec.value = form.value.zjimg.split(",")



}
if (id) {
  initData()
  iscz.value = true
} else {
  getxjdiqu()
  getcptype()
}
const saveFun = async () => {
  if (!form.value.diqucode) {
    window.$message.error("请选择地区")
    return
  }

  if (!form.value.hospital) {
    window.$message.error("请输入医院名称")
    return
  }
  if (!form.value.doctor) {
    window.$message.error("请输入医生姓名")
    return
  }
  if (!form.value.title) {
    window.$message.error("请输入作品标题")
    return
  }

  if (jjnseb.value.length <= 0) {
    window.$message.error("请上传作品图片")
    return
  }
  // if (!form.value.ssth) {
  //   window.$message.error("请输入手术体会")
  //   return
  // }
  if (jjnsec.value.length <= 0) {
    window.$message.error("请上传专家图片")
    return
  }
  if (!form.value.zjtext) {
    window.$message.error("请输入专家介绍")
    return
  }
  form.value.imgList = jjnseb.value.join(",")
  form.value.zjimg = jjnsec.value.join(",")
  crtetdfer.value = true
  const res = await dxpost("xjyx/zpyl", form.value, iscz.value ? 'put' : "post")
  if (!iscz.value) {
    const { data }: any = await dxget("xjyx/public/index/updataImg", { id: res.data.insertId })
    await dxpost("xjyx/zpyl", { id: res.data.insertId, qcCode: data }, "put")
  }
  crtetdfer.value = false
  window.$message.success("操作成功！")
  callBack()
}

</script>
<style scoped>
.sdfsdtrrter {
  width: 1200px;
}

.kjmklsertwe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.logo-context.aa {
  width: 150px;
  height: 228px;
}

.dfxcsedtrytr {
  padding-bottom: 100px
}
</style>